<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link media="all" rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}">
    <link media="all" rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <input type="text" name="loginName" placeholder="姓名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-inline">
                    <input type="text" name="userName" placeholder="登录名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-inline">
                    <input type="text" name="phone" placeholder="手机" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table id="item-list" lay-filter="item-list"></table>

            <script type="text/html" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe61f;</i>添加</button>
                </div>
            </script>
            <script type="text/html" id="item-bar">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
                        class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                        class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
    </div>
</div>

<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script th:src="@{/static/bm/js/common.js}"></script>
<script>
    layui.config({
        base: contextPath + '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'util'], function () {
        var $ = layui.$
            , form = layui.form
            , util = layui.util
            , table = layui.table;

        //监听搜索
        form.on('submit(search)', function (data) {
            table.reload('item-list', {
                where: data.field
            });
        });

        form.on('submit(clear)', function (data) {

        });
        table.render({
            elem: '#item-list'
            , url: contextPath + '/sys/user/list'
            , page: true
            , toolbar: '#toolbar'
            , limit: 10 //默认十条数据一页
            , limits: [10, 20, 30, 50] //数据分页条
            , cols: [
                [ //表头
                    {field: 'id', title: 'ID', align: 'center', hide: true},
                    {field: 'loginName', title: '登录名', align: 'center'},
                    {field: 'userName', title: '姓名', align: 'center'},
                    {field: 'phone', title: '手机', align: 'center'},
                    {field: 'userTypeDesc', title: '用户类型', align: 'center'},
                    {
                        field: 'createTime',
                        width: 180,
                        align: 'center',
                        title: '创建时间',
                        sort: true,
                        templet: function (d) {
                            return util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss")
                        }
                    },
                    {fixed: 'right', title: '操作', align: 'center', toolbar: '#item-bar', width: 200}
                ]
            ]
        });

        //监听工具条
        table.on('toolbar(item-list)', function (obj) {
            if (obj.event === 'add') {
                layer.open({
                    type: 2,
                    title: '添加用户',
                    maxmin: true,
                    area: ["30%", "70%"],
                    content: contextPath + '/sys/user/addPage',
                    shade: 0.3,
                    btn: ['新增', '取消'],
                    yes: function (index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#submit-btn");
                        submit.click();
                    }
                });
            }
        });


        table.on('tool(item-list)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: '编辑用户',
                    maxmin: true,
                    area: ["30%", "70%"],
                    content: contextPath + '/sys/user/editPage?id=' + data.id,
                    shade: 0.3,
                    btn: ['新增', '取消'],
                    yes: function (index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#submit-btn");
                        submit.click();
                    }
                });
            }
        });
    })
    ;
</script>
</body>
</html>
